import React, { useState, useEffect, useRef } from 'react'
import Navbar from '../../components/navbar/navbar'
import List from '../../components/List/list'
import './index.scss'
import { getClassLeftTop, getClassLeftFoot } from '../../api/index'
import { ScrollBoard } from '@jiaminghi/data-view-react'
import mp4 from '../../assets/video/111.mp4'

function index() {
  // 监控情况
  const [option, setOption] = useState('')
  // 值班情况
  const [config2, setConfig2] = useState({
    header: ['序号', '姓名', '时间', '值班内容'],
    data: [
      ['1', '张天林', '周六 08:00~20:00', '1号楼'],
      ['2', '岳赛博', '周六 08:00~20:00', '2号楼'],
      ['3', '王月', '周六 08:00~20:00', '3号楼'],
      ['4', '廖笑笑', '周六 08:00~20:00', '4号楼'],
      ['5', '杨晓璐', '周六 08:00~20:00', '5号楼'],
      ['6', '郝玲苒', '周六 08:00~20:00', '6号楼'],
      ['7', '张丽', '周六 08:00~20:00', '7号楼'],
      ['8', '刘茜', '周六 08:00~20:00', '8号楼'],
      ['9', '刘文丽', '周六 08:00~20:00', '9号楼'],
      ['10', '刘贺菲', '周六 08:00~20:00', '10号楼']
    ],
    index: true,
    columnWidth: [45],
    align: ['center']
  })




  useEffect(() => {
    // 监控情况 
    getClassLeftTop().then((res: any) => {
      console.log('监控情况', res.data.data.result[0]);
      setOption(
        JSON.parse(JSON.stringify(res.data.data.result[0].splice(0, 3)))
      )
    })
    // 值班情况
    getClassLeftFoot().then(res => {
      console.log('值班情况', res.data.data.result[0]);
      let arr2 = res.data.data.result[0];
      config2.data = arr2.map((item: any) => {
        return [
          item.eegs_id,
          `${item.eegs_name} ${item.eegs_phone}`,
          item.eegs_time,
          item.eegs_dutyContent,
        ];
      });
      // console.log(config2.data);
      setConfig2(JSON.parse(JSON.stringify(config2)))
    })
  }, [])
  return (
    <div className='box2'>
      <div className="left">
        <div className="left_top">
          <List title='监控情况'></List>
          <div className="left_one">
            {
              option && option.map((item: any, index: any) => {
                return (
                  <div className="ones" key={index}>
                    <img src="src/assets/image/位图.png" alt="" />
                    <div>
                      <p className='pData'>{item.floor}</p>
                      <p>设备数量:<span className='pItem'>{item.handclapNum}</span></p>
                      <p>正常设备: <span className='spanItem'>{item.handclapNum}</span> </p>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="left_cent">
          <List title='门禁情况'></List>
          <img src="src/assets/image/矩形.png" alt="" />
        </div>
        <div className="left_foot">
          <List title='值班情况'></List>
          <div className="left_two" >
            <ScrollBoard config={config2} />
          </div>
        </div>
      </div>
      <div className="center">
        {/* <img src="src/assets/image/Bitmap.png" alt="" /> */}
        <img className='image1' src="src/assets/image/Photo_安防管理.png" alt="" />
        <Navbar></Navbar>
      </div>
      <div className="right">
        <div className="right_top">
          <List title='...视频'></List>
          <div className="right_one">
            <video muted src='src/assets/redio/a1.mp4' height="100%" controls autoPlay loop></video>
            <video muted src='src/assets/redio/a2.mp4' height="100%" controls autoPlay loop></video>
            <video muted src='src/assets/redio/a3.mp4' height="100%" controls autoPlay loop></video>
          </div>
        </div>
      </div>
      <div className="top"></div>
    </div>
  )
}

export default index